<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="燃气配件订单照片详情"
      :visible.sync="visible"
      width="800px"
      @closed="reset"
    >
      <div class="content">
        <div class="item">
          <div class="title">原配件及现场照片</div>
          <el-image
            v-for="(item, index) in imageName1List"
            :key="index"
            class="image"
            :src="item"
            :preview-src-list="[item]"
          />
          <div v-if="imageName1List.length === 0" class="no-img">暂无照片</div>
        </div>
        <div class="item">
          <div class="title">新配件及现场照片</div>
          <el-image
            v-for="(item, index) in imageName2List"
            :key="index"
            class="image"
            :src="item"
            :preview-src-list="[item]"
          />
          <div v-if="imageName2List.length === 0" class="no-img">暂无照片</div>
        </div>
        <div class="item">
          <div class="title">纸质安装确认单</div>
          <el-image
            v-for="(item, index) in imageName3List"
            :key="index"
            class="image"
            :src="item"
            :preview-src-list="[item]"
          />
          <div v-if="imageName3List.length === 0" class="no-img">暂无照片</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { photosDetail } from '@/api'
  export default {
    name: 'imageDetails',
    data() {
      return {
        visible: false,
        imageName1List: [],
        imageName2List: [],
        imageName3List: []
      }
    },
    methods: {
      open(temp) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          this.imageName1List = []
          this.imageName2List = []
          this.imageName3List = []
          if (temp) {
            this.orderCode = temp
            this.getData()
          }
        })
      },
      async getData() {
        const res = await photosDetail({ orderCode: this.orderCode })
        if (res.data) {
          if (res.data.imageName1) {
            const imgs = res.data.imageName1.split(',')
            imgs.forEach(item => {
              this.imageName1List.push('http://image.haoyunqi.com.cn/' + item)
            })
          }
          if (res.data.imageName2) {
            const imgs = res.data.imageName2.split(',')
            imgs.forEach(item => {
              this.imageName2List.push('http://image.haoyunqi.com.cn/' + item)
            })
          }
          if (res.data.imageName3) {
            const imgs = res.data.imageName3.split(',')
            imgs.forEach(item => {
              this.imageName3List.push('http://image.haoyunqi.com.cn/' + item)
            })
          }
        }
      },
      reset() {
        this.visible = false
      }
    }
  }
</script>

<style lang='scss' scoped>
.content {
  width: 100%;
  .item {
    width: 100%;
    .title {
      margin-bottom: 10px;
    }
    .no-img {
      margin-bottom: 20px;
    }
    .image {
      width: 150px;
      height: 150px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
  }
}

</style>
